<!doctype html>
<html lang="zh">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">

<!-- Loding font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700" rel="stylesheet">

<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="/css/index.css">

<style>
	#tip {
		font-size: 12px;
		color: #3498db;
	}
</style>

<title>登录</title>
</head>
<body>

<!-- Backgrounds -->

<div id="login-bg" class="container-fluid">

  <div class="bg-img"></div>
  <div class="bg-color"></div>
</div>

<!-- End Backgrounds -->

<div class="container" id="login">
	<div class="row justify-content-center">
	<div class="col-lg-8">
	  <div class="login">

		<h1>肇卫士</h1>
		
		<!-- Loging form -->
			<form onsubmit="return false">
				<div class="form-group">
				  <input type="text" class="form-control" id="name" placeholder="请输入用户名">
				  
				</div>
				<div class="form-group">
				  <input type="password" class="form-control" id="password" placeholder="请输入密码">
				</div>
			  <p id="tip">请输入账户密码</p>
				<br>
				<button type="submit" id="my-login" class="btn btn-lg btn-block btn-success">登录</button>
			</form>
		 <!-- End Loging form -->
	</div>
	</div>
</div>

<script src="/js/axios.min.js"></script>
<script>
	const loginDom = document.querySelector('#my-login')
	loginDom.onclick = (event) => {
		let name = document.querySelector('#name').value
		let password = document.querySelector('#password').value

		axios.post('/request/backLogin',{name,password}).then(res => {
			console.log(res);
			if (res.data.code === 200) {
				window.location.href = '/index'
			}else {
				const tipDom = document.querySelector('#tip')
				tipDom.textContent = res.data.message
				tipDom.style.color = 'red'
			}
		})
	}
</script>

</body>
</html>